<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-line" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="text mx-2">设备在册、在用、在修、库存</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </div>
    <div class="btn-group">
      <el-checkbox-group
        v-model="checkList1"
        size="medium"
        @change="changeChecked"
      >
        <el-checkbox-button
          v-for="item in checkData"
          :label="item.lable"
          :key="item.lable"
          :class="item.class"
          >{{ item.name }}</el-checkbox-button
        >
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import { equipmentType } from "@/api/index";
export default {
  name: "centerRight1",
  data() {
    return {
      checkList1: ["0", "1", "2", "3"],
      checkData: [
        { class: "checked1", lable: "0", name: "空闲中" },
        { class: "checked3", lable: "1", name: "领用中" },
        { class: "checked4", lable: "2", name: "待维修" },
        { class: "checked5", lable: "3", name: "待报废" },
      ],
      config: {
        header: ["队组名称", "设备状态", "设备数量", "设备总数", "占比情况"],
        data: [],
        rowNum: 6, //表格行数
        headerHeight: 45,
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        index: true,
        columnWidth: [45],
        align: ["center", "center", "center", "center", "center", "center"],
      },
    };
  },
  methods: {
    getrequests() {
      let totle = 0;
      equipmentType().then((res) => {
        if (res.code == 200) {
          let data = [];
          res.data.map((item, index) => {
            totle += item.assetNumber;
            data.push([
              item.districtTeam,
              item.eqState,
              item.assetNumber,
              totle,
              parseFloat(((item.assetNumber / totle) * 100 || 0.0).toFixed(2)) +
                "%",
            ]);
            return data;
          });
          this.config.data = data;
          this.config = { ...this.config };
        }
      });
    },
    changeChecked(value) {
      this.checkList = value;
      this.config.data.map((item, index) => {
        this.checkList.includes(item.state) ? data.push(item) : "";
        return data;
      });
    },
  },
  mounted() {
    // setInterval(() => {
    //   this.getrequests();
    // }, 3600000);
    this.getrequests();
  },
};
</script>

<style lang="scss" scoped>
$box-height: 410px;
$box-width: 970px;
#centerRight1 {
  padding: 16px;
  padding-top: 20px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  margin-right: 120px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .btn-group {
    position: absolute;
    margin: -27% 0 0 970px;
    width: 200px;
    height: 400px;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
      width: 900px;
      height: 340px;
    }
  }
}
::v-deep .dv-scr-board {
  .header {
    color: rgb(161, 209, 230);
    // font-size: 18px;
    font-weight: 700;
    :nth-child(1) {
      color: #1d96fa;
    }
  }
  .rows {
    .row-item {
      color: rgb(122, 182, 206);
      // font-size: 17px;
      height: 42px;
      line-height: 42px;
      .ceil:nth-child(1) {
        color: #1d96fa;
        // font-size: 18px;
      }
    }
  }
}
.text-icon {
  background-color: #5cd9e8 !important;
}
.el-checkbox-group {
  z-index: 999;
  width: 100px;
  height: 400px;
  // position: absolute;
  // margin: -10% 0 0 900px;
}
::v-deep .el-checkbox-button {
  margin-bottom: 30px;
  color: #fbfbfc !important;
  .el-checkbox-button__label {
    color: #fbfbfc !important;
    font-size: 14px !important;
    // margin-left: -8px !important;
  }
  .el-checkbox-button__inner {
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 10px;
    border-radius: 20px !important;
  }
  &.is-checked {
    .el-checkbox-button__inner {
      width: 80px;
      height: 30px;
      text-align: center;
      line-height: 10px;
      border-radius: 20px;
      background-color: #50a1f1be;
      border-color: #40a0ffb4;
    }
  }
}

::v-deep .checked3 {
  &.is-checked {
    .el-checkbox-button__inner {
      background-color: #37ec46cb;
      border-color: #2abd36cb;
    }
  }
}
::v-deep .checked4 {
  &.is-checked {
    .el-checkbox-button__inner {
      background-color: #beae18fd;
      border-color: #f3e671c5;
    }
  }
}
::v-deep .checked5 {
  &.is-checked {
    .el-checkbox-button__inner {
      background-color: #e789a0f1;
      border-color: #e789a0f1;
    }
  }
}
</style>
